<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">



    <title>xiehao</title>

<style>
.app{
width:200px;
height:200px;

margin: 40px;


border: 10px solid transparent;
border-top-color: purple;
border-radius: 50%;

position: relative;
animation: loading 2s infinite;



}

.app::before{


content:"";

display: inline-block;

position: absolute;

top: -20px;
left: -20px;

 width: 220px;
height: 220px;
border-radius: 50%;
border: 10px solid transparent;
border-top-color: royalblue;

animation: loading 3s infinite;
}


.app::after{

content:"";

display: inline-block;
            position: absolute;

            width: 180px;
            height: 180px;
            border-radius: 50%;

            border: 10px solid transparent;
            border-top-color: red;

            animation: loading 1s infinite;


}
@keyframes loading {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }





</style>


</head>








<body>
    
<div class="app"></div>



</body>
</html>